<template>
  <div>
    <div id="detail"></div>

    <div class="header">
      <span>订单详情</span>
      <a href="javascript:history.go(-1)" class="return"></a>
    </div>
    <div style="height: 1rem;"></div>

    <div class="ddxx">
      <p class="ddxx_lt">订单信息</p>

      <router-link v-if="info.status!=4 ||info.status!=5" :to="appeal">
        <!-- info.id -->
        <p class="ddxx_rt">申诉</p>
      </router-link>

      <p v-if="info.status==1" class="ddxx_rt" style="margin-left: 10px; ">挂单中</p>

      <p v-if="info.status==1" class="ddxx_rt cxdd">撤销订单</p>

      <p v-if="info.status==2" class="ddxx_rt">未付款</p>

      <p v-if="info.status==3" class="ddxx_rt">已付款</p>

      <p v-if="info.status==4" class="ddxx_rt">已完成</p>

      <p v-if="info.status==5" class="ddxx_rt">已撤销</p>
      <p class="ddxx_rt" @click="isleave=true">留言</p>
    </div>

    <div class="mr">
      <p>
        <!-- <%if(info.type==1){%>
						买入
					<%}else if(info.type==2){%>
						卖出
        <%}%>-->
        {{buytype}}
        <span>{{info.ftypename}}</span>
      </p>
      <p v-if="info.status==2">剩余 {{min}}分{{secs}}秒</p>
    </div>

    <div class="jyje">
      <p class="jyje_lt">交易金额</p>
      <p class="jyje_rt">{{info.total}}CNY</p>
    </div>

    <div class="jyje">
      <p class="jyje_lt">交易数量</p>
      <p class="jyje_rt">{{info.num}}{{info.ftypename}}</p>
    </div>

    <!-- <div class="jyje">
				<p class="jyje_lt">交易价格</p>
				<p class="jyje_rt">6.78CNY/USDT</p>
    </div>-->

    <div class="jyje">
      <p class="jyje_lt">订单号</p>
      <p class="jyje_rt">{{info.ordersn}}</p>
    </div>

    <div class="tbtx">
      <p class="tbtx_lt">特别提醒</p>
      <p class="tbtx_rt">打款时，请用实名认证账户打款。不要备注任何信息！这很重要！</p>
    </div>

    <div class="jyje">
      <p class="jyje_lt">用户名</p>
      <p class="jyje_rt" v-if="info.user_data">{{info.user_data.real_name}}</p>
    </div>

    <div class="jyje">
      <p class="jyje_lt">用户账号</p>
      <p class="jyje_rt" v-if="info.user_data">{{info.user_data.mobile}}</p>
    </div>


    <div class="hs"></div>

    <!--收款方信息-->
    <div class="skf">
      <p class="skf_bt">收款方信息</p>

      <div class="skf_zh">
        <div class="skf_zh_lt">
          <p>账号</p>
        </div>
        <div class="skf_zh_rt" id="fz">
          <input
            type="text"
            disabled="disabled"
            :value="info.umobile"
            class="umobile"
            style="background: #fff;float: left;text-align: right;border: none;margin-top: 10px;"
          />
        </div>
      </div>
    </div>
    <!-- <%if(info.types==1){%>  -->
     <div v-if="info.bank" class="jyje" style="margin:0;">
      <p class="jyje_lt">银行卡账号姓名</p>
      <p class="jyje_rt">{{info.bank.realname}}</p>
    </div>
    <div v-if="info.bank" class="jyje" style="margin:0;">
      <p class="jyje_lt">银行卡账号</p>
      <p class="jyje_rt">{{info.bank.bank_name}}</p>
    </div>
      <div v-if="info.bank" class="jyje" style="margin:0;">
      <p class="jyje_lt">银行卡开户行</p>
      <p class="jyje_rt">{{info.bank.bank_open}}</p>
    </div>
    <div v-if="info.bank" class="jyje" style="margin:0;">
      <p class="jyje_lt">银行卡账号</p>
      <p class="jyje_rt">{{info.bank.bank_number}}</p>
    </div>

    <!--结束-->

    <!-- <%}else if(info.types==2){%> -->
    <div v-if="info.apply" class="jyje" style="margin:0;">
      <p class="jyje_lt">支付宝账号姓名</p>
      <p class="jyje_rt">{{info.apply.realname}}</p>
    </div>
    <div v-if="info.apply" class="jyje" style="margin:0;">
      <p class="jyje_lt">支付宝账号</p>
      <p class="jyje_rt">{{info.apply.bank_name}}</p>
    </div>
    <div v-if="info.apply" class="jyje" style="margin:0;">
      <p class="jyje_lt">支付宝二维码</p>
      <p class="jyje_rt">
        <img :src="info.apply.bank_number" @click="open" :class="lei" class="qwcode" />
      </p>
    </div>

    <!-- <%}else if(info.types==3){%> -->
    <div v-if="info.weixin" class="jyje" style="margin:0;">
      <p class="jyje_lt">微信账号姓名</p>
      <p class="jyje_rt">{{info.weixin.realname}}</p>
    </div>
    <div v-if="info.weixin" class="jyje" style="margin:0;">
      <p class="jyje_lt">微信账号</p>
      <p class="jyje_rt">{{info.weixin.bank_name}}</p>
    </div>
    <div v-if="info.weixin" class="jyje" style="margin:0;">
      <p class="jyje_lt">微信二维码</p>
      <p class="jyje_rt">
        <img :src="info.weixin.bank_number" @click="open" :class="lei" class="qwcode" />
      </p>
    </div>
    <!-- <%}%>  info.weixin.bank_number  -->


    <div class="czts" style="border-bottom: 1px solid #eee;">
      <p>操作提示：</p>
      <p style="font-size: 10px;">请用实名认证的银行卡或支付宝付款，否则扣押资金，谢谢！</p>
    </div>

    <!-- <%if(info.status==2 || info.status==3){%>  -->
    <!-- <div
      v-if="info.status==2 || info.status==3"
      style="width: 95%;text-align: left;margin: auto;margin-top: 30px;font-size: .35rem;border-bottom: 1px solid #eee;padding-bottom: 10px;"
    >
      支付密码：
      <input type="password" v-model="password" class="inp" />
    </div>-->
    <!-- <%}%> -->
    <div class="img_name">付款截图:</div>

    <div class="img" style="background:none" v-if="info.path">
      <div class="img_img" style="height:auto;margin:0 auto;">
        <span v-if="!info.path">图片</span>
        <div class="weui-uploader__input-box" style="position:unset;height:auto">
           <input
            id="uploaderInput"
            class="weui-uploader__input"
            type="file"
            accept="image/*"
            multiple
            text-indent="100%"
            @change="addImg"
            ref="inputer"
          />
          <img v-if="info.path" ref="imgpath" :src="info.path" alt />
        </div>
      </div>
    </div>

    <div class="img" v-else>
      <div class="img_img">
        <span v-if="!info.path">图片</span>
        <div class="weui-uploader__input-box">
          <input
            id="uploaderInput"
            class="weui-uploader__input"
            type="file"
            accept="image/*"
            multiple
            text-indent="100%"
            @change="addImg"
            ref="inputer"
          />
          <img v-if="info.path" ref="imgpath" :src="info.path" alt />
        </div>
      </div>
    </div>

    <input type="hidden" id="status_id" :value="info.status" />
    <!-- <%if(info.status==2){%>  -->
    <div v-if="info.status==2&&info.type==1" class="footer" @click="confirm">确认付款</div>
    <!-- <div v-if="info.status==2" class="footer" @click="confirm">确认付款</div> -->
    <!-- <%}else if(info.status==3){%> -->
    <div v-else-if="info.status==3&&info.type==2" class="footer" @click="confirm1">确认收款</div>
    <!-- <div v-else-if="info.status==3" class="footer" @click="confirm1">确认收款</div> -->
    <!-- <%}%> -->

    <!-- leave -->
    <div class="leave-box" v-if="isleave">
      <div class="leave-background" @click="isleave=false"></div>
      <div class="centen">
        <p class="name">留言</p>
        <textarea
          v-model="leaveinput"
          id="leaveinput"
          cols="30"
          placeholder="请输入留言内容"
          maxlength="200"
          rows="10"
        ></textarea>
        <p class="wordnum">200/{{wordnum}}</p>
        <div class="send" @click="send">发送</div>
      </div>
    </div>
  </div>
</template>
<script>
import Clipboard from "clipboard";
import { setTimeout, setInterval, clearInterval } from "timers";
export default {
  data() {
    return {
      appeal: "/otcappeal?id=" + this.$route.query.id,
      info: {},
      buytype: "",
      password: "",
      isleave: false,
      leaveinput: "",
      wordnum: 0,
      min: "--",
      secs: "--",
      times: "",
      lei:""
    };
  },
  created() {
    this.$axios
      .post("/index/otcexchange/orderdetail", {
        orderid: this.$route.query.id
      })
      .then(res => {
        this.info = res.data.info;
        this.info.type == 1 ? (this.buytype = "买入") : (this.buytype = "卖出");
        if (this.info.daojishi >= 0) {
          var sum = this.info.daojishi;
          this.times = setInterval(() => {
            if (sum <= 0) {
              clearInterval(this.times);
              this.$router.back(-1);
            } else {
              var minute = parseInt(sum / 60);
              var sec = sum - minute * 60;
              sec < 10 ? (sec = "0" + sec) : "";
              this.min = minute;
              this.secs = sec;
              sum--;
            }
          }, 1000);
        }
      });
  },
  beforeDestroy() {
    this.times ? clearInterval(this.times) : "";
  },
  methods: {
    open(){
      this.lei?this.lei="":this.lei="qwcodelei";
    },
    send() {
      console.log("留言");
      if (!this.leaveinput) {
        this.$createToast({
          txt: "请输入留言内容",
          type: "txt",
          time: 1000
        }).show();
        return;
      }
      this.$axios
        .post("/index/Otcexchange/addmsg", {
          orderid: this.$route.query.id,
          content: this.leaveinput
        })
        .then(res => {
          this.$createToast({
            txt: "留言成功",
            type: "txt",
            time: 1200
          }).show();
          if (res.data.code == 0) {
            setTimeout(() => {
              this.isleave = false;
            }, 1200);
          }
        });
    },
    addImg() {
      var inputDOM = this.$refs.inputer.files[0];
      var formData = new FormData();
      formData.append("file", inputDOM);
      var config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      this.$axios
        .post("/index/upload/uploadimg", formData, config)
        .then(response => {
          if (response.data.code === 0) {
            this.info.path = response.data.data;
          } else {
            this.$createToast({ txt: "网络错误", type: "txt" }).show();
          }
        });
    },
    confirm() {
      if (!this.info.path) {
        this.$createToast({
          txt: "请上传付款截图",
          type: "txt",
          time: 1200
        }).show();
        return;
      }
      this.$axios
        .post("/index/otcexchange/payment", {
          orderid: this.$route.query.id,
          path: this.info.path
        })
        .then(res => {
          if (res.data.code == 0) {
            this.$createToast({
              txt: res.data.msg,
              type: "txt",
              time: 1200
            }).show();
            setTimeout(() => {
              this.$router.back(-1);
            }, 1200);
          } else {
            this.$createToast({
              txt: res.data.msg,
              type: "txt",
              time: 1200
            }).show();
          }
        });
    },
    confirm1() {
      // if (!this.password) {
      //   this.$createToast({
      //     txt: "请输入密码",
      //     type: "txt",
      //     time: 1200
      //   }).show();
      //   return;
      // }
      this.$axios
        .post("/index/otcexchange/finishorder", {
          orderid: this.$route.query.id
        })
        .then(res => {
          if (res.data.code == 0) {
            this.$createToast({
              txt: res.data.msg,
              type: "txt",
              time: 1200
            }).show();
            setTimeout(() => {
              this.$router.back(-1);
            }, 1200);
          } else {
            this.$createToast({
              txt: res.data.msg,
              type: "txt",
              time: 1200
            }).show();
          }
        });
    },
    copy(val) {
      var clipboard = new Clipboard(".tag", {
        text: function() {
          return val;
        }
      });
      clipboard.on("success", e => {
        this.$createToast({ txt: "复制成功", type: "txt", time: 1000 }).show();
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        this.$createToast({ txt: "复制失败", type: "txt", time: 1000 }).show();
        clipboard.destroy();
      });
      // this.$copyText(val).then(()=>{
      //
      // })
    }
  },
  watch: {
    leaveinput(s) {
      this.wordnum = s.length;
    }
  }
};
</script>

<style lang="less" scoped>
@import url("../less/otcDetails");
</style>


